<template>
    <div>
        <use-page-header/>
        <div class="wrapper">
            <a-card>
                <a-flex class="margin-bottom" justify="space-between">
                    <a-button type="primary" @click="showModal"><PlusOutlined/>添加字段</a-button>
                    <div><a-input-search placeholder="输入关键字搜索" name="keywords" @search="filterData" allow-clear/></div>
                </a-flex>
               <a-table :pagination="tablePagination" 
                        :rowSelection="{}" 
                        :columns="columns" 
                        :loading="state.loading"
                        :data-source="data">
                    <template #bodyCell="{column,record}">
                        <template v-if="column.dataIndex === 'value'">
                            <a-tag v-for="(item,index) in record.value" :key="index">{{item}}</a-tag>
                        </template>
                        <template v-if="column.dataIndex === 'min' && ['text','textarea'].includes(record.field_type)">
                            {{record.min}}~{{ record.max }}
                        </template>
                        <template v-if="column.dataIndex === 'required'">
                            {{record.required ? '是' : '否'}}
                        </template>
                        <template v-if="column.dataIndex === 'status'">
                            <a-tag color="green" v-if="record.status">正常</a-tag>
                            <a-tag v-else>禁用</a-tag>
                        </template>
                        <template v-if="column.dataIndex === 'action'">
                            <span class="actions">
                                <span @click="showModal(record)">编辑</span>
                                <span @click="onDelete(record.id)">删除</span>
                            </span>
                        </template>
                    </template>
                </a-table>
            </a-card>
        </div>
        <field-modal v-model:open="state.open" :data-item="dataItem" @ok="getData"/>
    </div>
</template>
<script lang="ts" setup>
import { UsePageHeader } from '@/components';
import { tablePagination} from '@/config';
import { PlusOutlined } from '@ant-design/icons-vue';
import { reactive, ref, onMounted } from 'vue';
import FieldModal from './FieldModal.vue';
import useMessage from '@/hooks/useMessage';
import {deleteFields, getFieldsList} from '@/server/modules/fields'
import { Modal } from 'ant-design-vue';
import { hasPermission } from '@/hooks';

const dataItem = ref<FieldsType>()
const state = reactive({
    open: false,
    loading:false
})
const data = ref<FieldsType[]>([])
const dataSource = ref<FieldsType[]>([])

const columns =[
    {title:'字段名称',dataIndex:'name',width:200},
    {title:'类型',dataIndex:'field_type',width:100},
    {title:'预选值',dataIndex:'value'},
    {title:'长度',dataIndex:'min',width:100},
    {title:'是否必填',dataIndex:'required',width:100},
    {title:'状态',dataIndex:'status',width:100},
    {title:'操作',dataIndex:'action',width:200}
]
const showModal = (item?: FieldsType) => {
    state.open = true
    dataItem.value = item
}
const getData = async ()=>{
    try{
        state.loading = true
        const res = await getFieldsList()
        if(res.code === 200 && res.data){
            data.value = res.data
            dataSource.value = res.data
        }
    }finally{
        setTimeout(() => {
            state.loading= false
        }, 500);
    }
}
onMounted(()=>{
    getData()
})
const onDelete = async(id:number)=>{
    if(!hasPermission('delete')) return
    Modal.confirm({
        title:'提示',
        content:'确定要删除吗？',
        onOk:async()=>{
            const res = await deleteFields(id)
            if(res.code === 200){
                getData()
            }
            useMessage(res.code,res.message)
        }
    })
}
const filterData = (value:string)=>{
    try{
        state.loading = true
         if(!value) return data.value = dataSource.value
         data.value = dataSource.value.filter(item=>item.name.includes(value))
    }catch(err){
        console.log(err);
    }finally{
        setTimeout(() => {
            state.loading= false
        }, 300);
    }
}
   
</script>

<style scoped>

</style>